<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加相册信息</title>
    <style>
        /* 自定义css样式 */
        .upload{
            float:left;
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            border: 1px solid #999;
            text-decoration: none;
            color: black;
            background-color: #ddd;

        }
        .selectfile{
            position: absolute;
            overflow: hidden;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .filename{
            float:left;
            height: 20px;
            vertical-align: middle;
            line-height: 20px;
            padding-top: 5px;
            margin-left: 5px;
            outline:0;
            border:0px;
        }

    </style>

</head>
<body>
	<center>
        {% include "picapp/picman/menu.html" %}

        <h3>添加相册信息</h3>
        <form action="{% url 'insertpics' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <table width="500" border="0">
                <tr height="40">
                    <td width="60">标题：</td>
                    <td width="440"><input type="text" name="title" style="width:420px;height:20px;line-height:20px;"/></td>
                </tr>
                <tr height="40">
                    <td width="60">图片：</td>
                    <td width="440">
                        <a href="" class="upload">选择文件
                            <input type="file" id="btnPic" class="selectfile" name="mypic" multiple="multiple" />
                        </a>
                        <input type="text" id="txtPic" class="filename" readonly="true" style="width:340px;" value="未选择任何文件"/>
                    </td>
                </tr>

                <tr height="40">
                    <td colspan="2" align="center">
                        <input type="submit" style="width:60px;margin:5px;" value="添加"/>
                        <input type="reset" style="width:60px;margin:5px;" value="重置"/>
                    </td>
                </tr>
            </table>
        </form>
	</center>


    <script type="text/javascript">
        //执行点击“选择文件”按钮，将选择的文件路径和文件名填充到显示文件名的文本框
        document.getElementById("btnPic").addEventListener("change",function () { 
            //获取显示文件名的文本框
            var input = document.getElementById("txtPic");
            if (this.value == ""){    //没有选择文件
                input.value = "未选择任何文件";
            }
            else{                     //已经选择文件，将文件路径和文件名填充到显示文件名的文本框
                input.value = this.value;
            }
        });
    </script>
</body>
</html>